<template>
  <form class="formlayouts" action="">
    <div class="formlayouts-form-item">
      <input class="formlayouts-input" type="text" placeholder="设置用户名称">
    </div>
    <div class="formlayouts-form-item">
      <input class="formlayouts-input" type="text" placeholder="输入手机号码">
    </div>
    <div class="formlayouts-form-item">
      <input class="formlayouts-input" type="text" placeholder="短信验证码">
    </div>
    <div class="formlayouts-form-item">
      <input class="formlayouts-input" type="text" placeholder="设置6位至20位字母、数字和组合">
    </div>
    <div class="formlayouts-form-item">
      <input class="formlayouts-input" type="text" placeholder="请在次输入上面密码">
    </div>
    <div class="formlayouts-form-item item-button">
      <i class="iconfont icon-follow"></i>
      <i class="iconfont icon-icon-weixuanze"></i>
      <span class="icon-soan">已阅读并同意<i class="formlayouts-form-i">《用户服务协议》</i></span>
    </div>
    <div class="formlayouts-form-item">
      <button class="formlayouts-form-button">立即注册</button>
    </div>
  </form>
</template>

<script setup lang="ts">

</script>

<style scoped>
@import url(../../Login/font_3959444_909kpv9ajc/iconfont.css);
.formlayouts {
  padding-left: 460px;
}
.formlayouts-form-item {
  position: relative;
  padding-bottom: 24px;
}
.formlayouts-input {
  width: 300px;
  height: 50px;
  border: 1px solid #e4e4e4;
  padding-left: 40px;
}
.formlayouts-form-i {
  color: #27ba9b;
  font-size: 14px;
}
.formlayouts-form-button {
  background: #ccc;
  width: 300px;
  height: 50px;
  border-radius: 4px;
  display: block;
  font-size: 16px;
  color: #fff;
  text-align: center;
  line-height: 50px;
  border: none;
}
.icon-icon-weixuanze {
  display: none;
}
.icon-soan {
  margin-left: 5px;
}
.icon-follow {
  color: #27ba9b;
}
.item-button {
  padding-left: 45px;
}
</style>
